

import { count, log } from "console";
import React, { Component } from "react";
import type { ReactNode } from 'react'

export default class App extends Component {

    state = {
        name: '张三',
        age: 18,
    }

    changeValue(e: React.ChangeEvent<HTMLInputElement>) {

        // dir 是详细的输入
        // console.dir(e.target);
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    render() {
        return <>
            <div>
                <h1>父组件 - {this.state.name} - {this.state.age}</h1>

                {/* 该写法比较繁琐，因为多次使用且代码基本一样，不够美观 */}
                <input type="text" placeholder="请输入名字" value={this.state.name} onChange={(e) => {
                    this.setState({
                        name: e.target.value
                    })
                }} />
                <input type="text" placeholder="请输入年龄" value={this.state.age} onChange={(e) => {
                    this.setState({
                        age: e.target.value
                    })
                }} />

                <hr />
                {/* name 属性是提交表单到服务器的时候，后端可以通过 name 取值 */}
                <input type="text" placeholder="请输入名字" name="name" value={this.state.name} onChange={e => this.changeValue(e)} />
                <input type="text" placeholder="请输入年龄" name="age" value={this.state.age} onChange={e => this.changeValue(e)} />


            </div>
        </>
    }
}